<template>
	<div class="production-pick">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addPick">新增领料单</el-button>
				<el-input v-model="searchName" placeholder="搜索物料名称" style="width: 200px; margin-left: 10px" clearable />
				<el-select v-model="searchStatus" placeholder="筛选状态" style="width: 200px; margin-left: 10px" clearable>
					<el-option label="待领料" value="待领料" />
					<el-option label="已领料" value="已领料" />
					<el-option label="已关闭" value="已关闭" />
				</el-select>
			</div>

			<el-table :data="filteredPicks" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="pickId" label="单据编码" sortable></el-table-column>
				<el-table-column prop="date" label="日期" sortable></el-table-column>
				<el-table-column prop="status" label="状态" sortable>
					<template #default="scope">
						<el-tag
							:type="scope.row.status === '已领料' ? 'success' : (scope.row.status === '待领料' ? 'warning' : 'info')">
							{{ scope.row.status }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="operator" label="操作员" sortable></el-table-column>
				<el-table-column prop="warehouse" label="仓库" sortable></el-table-column>
				<el-table-column prop="trackingId" label="跟单编号" sortable></el-table-column>
				<el-table-column prop="productionId" label="生产单号" sortable></el-table-column>
				<el-table-column prop="materialCode" label="物料编码" sortable></el-table-column>
				<el-table-column prop="materialName" label="物料名称" sortable></el-table-column>
				<el-table-column prop="quantity" label="生产数量" sortable></el-table-column>
				<el-table-column fixed="right" label="操作" width="140">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editPick(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deletePick(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="领料单信息" width="600px">
			<el-form :model="currentPick" label-width="120px">
				<el-form-item label="单据编码">
					<el-input v-model="currentPick.pickId" />
				</el-form-item>
				<el-form-item label="日期">
					<el-date-picker v-model="currentPick.date" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="currentPick.status">
						<el-option label="待领料" value="待领料" />
						<el-option label="已领料" value="已领料" />
						<el-option label="已关闭" value="已关闭" />
					</el-select>
				</el-form-item>
				<el-form-item label="操作员">
					<el-input v-model="currentPick.operator" />
				</el-form-item>
				<el-form-item label="仓库">
					<el-input v-model="currentPick.warehouse" />
				</el-form-item>
				<el-form-item label="跟单编号">
					<el-input v-model="currentPick.trackingId" />
				</el-form-item>
				<el-form-item label="生产单号">
					<el-input v-model="currentPick.productionId" />
				</el-form-item>
				<el-form-item label="物料编码">
					<el-input v-model="currentPick.materialCode" />
				</el-form-item>
				<el-form-item label="物料名称">
					<el-input v-model="currentPick.materialName" />
				</el-form-item>
				<el-form-item label="生产数量">
					<el-input-number v-model="currentPick.quantity" :min="1" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="savePick">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const picks = ref([
	{ pickId: 'PICK001', date: '2024-06-01', status: '待领料', operator: '张三', warehouse: '仓库A', trackingId: 'TK001', productionId: 'PRD001', materialCode: 'MAT001', materialName: '阿莫西林', quantity: 100 },
	{ pickId: 'PICK002', date: '2024-06-02', status: '已领料', operator: '李四', warehouse: '仓库B', trackingId: 'TK002', productionId: 'PRD002', materialCode: 'MAT002', materialName: '布洛芬', quantity: 80 },
])

for (let i = 3; i <= 15; i++) {
	picks.value.push({
		pickId: `PICK00${i}`,
		date: `2024-06-${i < 10 ? '0' + i : i}`,
		status: i % 3 === 0 ? '已关闭' : (i % 3 === 1 ? '已领料' : '待领料'),
		operator: `操作员${i}`,
		warehouse: `仓库${String.fromCharCode(65 + (i % 5))}`,
		trackingId: `TK00${i}`,
		productionId: `PRD00${i}`,
		materialCode: `MAT00${i}`,
		materialName: `物料${i}`,
		quantity: 50 + i * 10
	})
}

const searchName = ref('')
const searchStatus = ref('')
const dialogVisible = ref(false)
const currentPick = ref({})

// 筛选
const filteredPicks = computed(() =>
	picks.value.filter(p =>
		(!searchName.value || p.materialName.includes(searchName.value)) &&
		(!searchStatus.value || p.status === searchStatus.value)
	)
)

// 新增
const addPick = () => {
	currentPick.value = { pickId: '', date: '', status: '', operator: '', warehouse: '', trackingId: '', productionId: '', materialCode: '', materialName: '', quantity: 1 }
	dialogVisible.value = true
}

// 编辑
const editPick = (row) => {
	currentPick.value = { ...row }
	dialogVisible.value = true
}

// 保存
const savePick = () => {
	if (!currentPick.value.pickId || !currentPick.value.materialName) {
		ElMessage.error('单据编码和物料名称不能为空')
		return
	}
	const index = picks.value.findIndex(p => p.pickId === currentPick.value.pickId)
	if (index >= 0) {
		picks.value[index] = { ...currentPick.value }
		ElMessage.success('领料单已更新')
	} else {
		picks.value.push({ ...currentPick.value })
		ElMessage.success('领料单已新增')
	}
	dialogVisible.value = false
}

// 删除
const deletePick = (row) => {
	ElMessageBox.confirm('确认删除该领料单吗？', '提示', { type: 'warning' })
		.then(() => {
			picks.value = picks.value.filter(p => p.pickId !== row.pickId)
			ElMessage.success('领料单已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.production-pick .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
